<template>
    <a-modal
            v-model="visible"
            :width="700"
            title="密钥充注"
            :maskClosable="false"
            @ok="confirm"
            @cancel="cancel"
            okText="确定"
            cancelText="取消"
    >
        <a-form :form="form" @keydown.native.enter.prevent='confirm' class="modelSearch">
            <a-form-item v-bind="formStyle" label="密钥块大小" required>
                <a-select placeholder="请选择密钥块大小"
                          v-decorator="['keyValue',{ initialValue: 1}, { rules: [{ required: true, message: '请选择密钥块大小'}]}]">
                    <a-select-option v-for="item in keyTypeList" :key="item.value" :value="item.value">{{item.label}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label=" " v-bind="formStyle" class="noLabelAfter">
                <a-progress :percent="captureProgress" status="active" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script>
    import verify from 'libs/verify'
    import { mapState } from 'vuex'

    export default {
        name: 'add_edit',
        data () {
            return {
                form: this.$form.createForm(this),
                isEdit: false,
                isAuth: false,
                visible: false,
                sessionUserName: '',
                verify,
                id: 0,
                keyTypeList: [
                    {
                        value: 1,
                        label: '10KB'
                    },
                    {
                        value: 2,
                        label: '20KB'
                    },
                    {
                        value: 3,
                        label: '30KB'
                    },
                    {
                        value: 4,
                        label: '40KB'
                    }
                ],
                captureProgress: 0,
            }
        },
        computed: {
            ...mapState({
                formStyle: state => state.common.formStyle,  //表单label，input宽度
                formItemLayoutWithOutLabel: state => state.common.formItemLayoutWithOutLabel  //表单label，input宽度
            })
        },
        methods: {
            formalNum (event) {
                let a = event.target.value;
                a = a.replace(/\D/g, '');
                if (a.length > 11) {
                    a = a.substring(0, 11)
                }
                return a
            },
            /**
             * Function    : showAddModal
             * Description : 新增单位时显示弹框
             * Input       : none
             * Return      : none
             */
            showAddModal () {
                this.visible = true;
                this.isEdit = false;
                let _this = this;
                setTimeout(function () {
                    _this.$refs['refocus'].focus()
                }, 200)
            },
            /**
             * Function    : showEdit
             * Description : 编辑时单位显示
             * Input       : opt单个单位所有数据
             * Return      : none
             */
            showEdit (opt) {
                this.isEdit = true;
                this.visible = true;
                this.id = opt.id;
                this.$nextTick(() => {
                    this.form.setFieldsValue(
                      this.$pick(opt, [
                          'username',
                          'phone',
                          'roleId',
                          'name',
                      ])
                    )
                })
            },
            /**
             * Function    : confirm
             * Description : 表单提交
             * Input       : data
             * Return      : none
             */
            confirm (e) {
                e.preventDefault();
                this.form.validateFields((err, value) => {
                    if (!err) {
                        let _this =this
                        _this.$post('/v1/qkeys/charge',value).then(res => {
                            if (res.code === 0) {
                                _this.$emit('init')
                                _this.$message.success(res.message);
                            } else {
                                _this.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            /**
             * Function    : cancel
             * Description : 取消表单显示
             * Input       : data
             * Return      : none
             */
            cancel () {
                this.visible = false;
                let _this = this;
                setTimeout(function () {
                    _this.form.resetFields()
                }, 100)
            }
        }
    }
</script>

